$rw-margin-bottom-grid-cell: 4px;

.article-block__research-and-writing {
    margin-bottom: 40px;

    > h1 {
        margin-bottom: $margin-bottom-section-heading-ltp;
    }
}

// Override for author pages, where "Featured work" and "Latest work" should look the same.
.author-work .article-block__research-and-writing > h1 {
    margin: 24px 0 16px;
    color: $blue-60;
    @include sm-up {
        margin: 32px 0 24px;
    }
}

.research-and-writing-row__heading {
    // The assumption here is that the last item of the cell always has a
    // margin-bottom of $rw-margin-bottom-grid-cell, whether it is author names
    // (topic pages) or an excerpt (author pages). The calculation is kept
    // visible as a way to better document what is happening, and to preserve
    // the design intent in code.
    margin-top: 40px - $rw-margin-bottom-grid-cell;
    margin-bottom: 24px;
    color: $blue-60;
}

.research-and-writing-row__heading--featured {
    margin-top: 40px;
}

.research-and-writing__heading--featured,
.research-and-writing-row__heading--featured {
    color: $blue-90;
    @include sm-up {
        text-align: center;
    }
}

.research-and-writing-row__heading--divider {
    margin: 24px - $rw-margin-bottom-grid-cell 0 16px;
    padding-top: 24px;
    border-top: 1px solid $blue-20;
    @include sm-up {
        margin: 40px - $rw-margin-bottom-grid-cell 0 24px;
        padding-top: 40px;
    }
}

.research-and-writing-row__links {
    row-gap: 40px - $rw-margin-bottom-grid-cell;
}

.research-and-writing-row__links--featured {
    display: flex;
    align-items: start;
    gap: var(--grid-gap);
    // In the featured variant on sm-up screens, links are centered, not aligned
    // to the grid.
    @include sm-up {
        justify-content: center;
        flex-wrap: wrap;
    }
}

.research-and-writing-row__links--condensed-sm {
    @include sm-only {
        row-gap: 24px - $rw-margin-bottom-grid-cell;
    }
}

.research-and-writing-row__links--condensed {
    row-gap: 32px - $rw-margin-bottom-grid-cell;
}

.research-and-writing-row__links--overflow {
    @include sm-only {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;

        .research-and-writing-link {
            flex: 1 0 80%;
            scroll-snap-align: start;
        }
    }
}

.research-and-writing-link {
    color: $blue-90;

    &:hover .research-and-writing-link__title {
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    figure {
        padding-bottom: 57%;
        width: 100%;
        max-height: 57%;
        display: block;
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
        margin: 0 0 12px;
    }

    img {
        object-fit: cover;
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }
}

.research-and-writing-link--hide-thumbnail-sm {
    @include sm-only {
        figure {
            display: none;
        }
    }
}

.research-and-writing-link--featured {
    @include sm-up {
        @include flex-item-width-for-row-of(2);
    }

    @include md-up {
        @include flex-item-width-for-row-of(3);
    }

    @include lg-up {
        @include flex-item-width-for-row-of(4);
    }

    border: 1px solid $blue-10;
    padding: 16px;
    transition: border-color 0.125s;

    &:hover {
        border-color: $blue-30;
        .research-and-writing-link__title {
            text-decoration: none;
        }
    }
}

.research-and-writing-link__date {
    @include body-3-medium;
    color: $blue-60;
    margin-top: 0;
    margin-bottom: $rw-margin-bottom-grid-cell;
}

.research-and-writing-link__title {
    @include h3-bold;
    margin-top: 0;
    margin-bottom: $rw-margin-bottom-grid-cell;
}

.research-and-writing-link__title--large {
    @include md-up {
        @include h2-bold;
        // Resetting the margins to the base style, as they are overridden by the mixin
        margin-top: 0;
        margin-bottom: $rw-margin-bottom-grid-cell;
    }
}

.research-and-writing-link__description {
    @include body-3-medium;
    color: $blue-90;
    margin-bottom: $rw-margin-bottom-grid-cell;
    margin-top: 0;
}

.research-and-writing-link__description--large {
    @include md-up {
        @include body-2-regular;
        // Resetting the margins to the base style, as they are overridden by the mixin
        margin-bottom: $rw-margin-bottom-grid-cell;
        margin-top: 0;
    }
}

.research-and-writing-link__authors {
    color: $blue-60;
    margin-bottom: $rw-margin-bottom-grid-cell;
    margin-top: 0;
}

.research-and-writing-link--error {
    background-color: rgba(255, 0, 0, 0.1);
    padding: 24px;
}

.article-block__gray-section + .article-block__research-and-writing {
    // Compensating for non-collapsing margins
    margin-top: -32px;
}

.research-and-writing__see-all {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}
